<template>
  <div class="layout">
    <div class="row action-bar">
        <Row>
            <Col span="16">
                <Button-group>
                    <Button type="ghost">
                        <Icon type="android-upload"></Icon>
                        Upload
                    </Button>
                    <Button type="ghost">
                        <Icon type="android-download"></Icon>
                        Download
                    </Button>
                </Button-group>
            </Col>
            <Col span="8" class="action-bar-flow-right">
                <Input icon="ios-search" placeholder="请输入..." style="width: 200px"></Input>
                <Button-group>
                    <Button type="ghost">
                        <Icon type="grid"></Icon>
                    </Button>
                    <Button type="ghost">
                        <Icon type="navicon"></Icon>
                    </Button>
                </Button-group>
            </Col>
        </Row>
    </div>

    <div class="row">
        <Breadcrumb>
            <Breadcrumb-item href="#">Home</Breadcrumb-item>
            <Breadcrumb-item href="#">Movie</Breadcrumb-item>
            <Breadcrumb-item>China</Breadcrumb-item>
        </Breadcrumb>
    </div>

    <!-- <div class="row">
        {{total}}
        <Child v-on:incrementxxxx="incrementTotal"></Child>
        <Child v-on:incrementxxxx="incrementTotal"></Child>
    </div> -->

    <div class="row">
        <Table :columns="columns1" :data="data1"></Table>
    </div>

    <div class="row">
        当前空间：{{$route.meta.type}}
    </div>
  </div>
</template>

<script>
import iView from 'iview';
import Child from './child'
import Icon from 'iview/src/components/icon';
import Button from 'iview/src/components/button';
import Dropdown from 'iview/src/components/dropdown';

export default {
  name: 'space',
  data () {
    return {
        msg: 'space ',
        total: 0,
        columns1: [
            {
                type: 'selection',
                width: 60,
                align: 'center'
            },
            {
                title: '文件名',
                key: 'name'
            },
            {
                title: ' ',
                key: 'action',
                width: "200px",
                render:(h,params)=>{
                    return (
                        <div>
                            <Button type="text">
                                <Icon type="android-share-alt"></Icon>
                            </Button>
                            <Button type="text">
                                <Icon type="android-download"></Icon>
                            </Button>
                            <Dropdown placement="bottom-start">
                                <Icon type="more"></Icon>
                                <Dropdown.Menu slot="list">
                                    <Dropdown.Item>Copy</Dropdown.Item>
                                    <Dropdown.Item>Clone</Dropdown.Item>
                                    <Dropdown.Item>Move</Dropdown.Item>
                                    <Dropdown.Item>Delete</Dropdown.Item>
                                </Dropdown.Menu>
                            </Dropdown>
                        </div>
                    );
                }
            },
            {
                title: '大小',
                key: 'size',
                align: 'center',
                width: "120px"
            },
            {
                title: '修改日期',
                key: 'update_time',
                align: 'center',
                width: "200px"
            }
        ],
        data1: [
            {
                name: '《Node.js实战》',
                size: '18.00 MB',
                update_time: '2017-06-29 10:10:20'
            },
            {
                name: '《C#从入门到精通》',
                size: '24.00 MB',
                update_time: '2017-06-29 10:10:30'
            }
        ]  
    }
  },
  created:function(){
    console.log(iView);
  },
  components:{
      Child
  },
  methods:{
    incrementTotal: function () {
        this.total += 1;
        console.log("触发子组件后更新");
    }
  }
}
</script>
